import React, { Component } from 'react'
import {
  Card,
  Button,
  Table,
  Modal,
  message
} from 'antd'

import { reqAddRole, reqRoles, reqUpdateRole } from '../../api'
import { PAGE_SIZE } from '../../utils/constants'
import memoryUtils from '../../utils/memory_utils'
import storageUtils from '../../utils/storage_utils'
import { formatDate } from '../../utils/date_utils'
import AddForm from './add-from'
import AuthForm from './auth-form'

// 角色路由
export default class Role extends Component {

  state  = {
    roles: [], // 所有角色的列表
    role: {}, // 选中的 角色
    isShowAdd: false, // 是否显示添加弹框
    isShowAuth: false, // 是否显示设置权限弹框
  }

  constructor (props) {
    super(props)

    this.auth = React.createRef()
  }

  initColumns = () => {
    this.columns = [
      {
        title: '角色名称',
        dataIndex: 'name'
      },
      {
        title: '创建时间',
        dataIndex: 'create_time',
        render: create_time => formatDate(create_time)
      },
      {
        title: '授权时间',
        dataIndex: 'auth_time',
        render: auth_time => formatDate(auth_time)
      },
      {
        title: '授权人',
        dataIndex: 'auth_name'
      },
    ]
  }

  onRow = (role) => {
    return {
      onClick: e => { // 点击行
        // console.log(role)
        this.setState({ role })
      }
    }
  }

  // 获取所有角色列表
  getRoles = async () => {
    const result = await reqRoles()
    if (result.status === 0) {
      const roles = result.data
      // 更新角色状态
      this.setState({ roles })
    }
  }

  // 添加角色
  addRole = () => {
    // 进行表单验证, 只有通过才向下处理
    this.form.validateFields(async (err, values) => {
      if (!err) {
        // 隐藏确认框
        this.setState({ isShowAdd: false })

        // 1. 收集输入数据
        const { roleName } = values
        this.form.resetFields()
        // 2. 发送请求, 添加角色
        const result = await reqAddRole(roleName)
        if (result.status === 0) {
          // 3. 根据结果提示/更新
          message.success('添加角色成功')
          // 新产生的角色
          const role = result.data
          // 更新 roles 状态: 基于原本状态数据更新
          this.setState({
            roles: [...this.state.roles, role]
          })
        } else {
          message.error('添加角色失败')
        }
      }
    })
  }

  // 更新角色
  updateRole = async () => {
    // 隐藏确认框
    this.setState({ isShowAuth: false })

    const { role } = this.state
    // 得到最新的 menus
    const menus = this.auth.current.getMenus()
    role.menus = menus
    role.auth_name = memoryUtils.user.username
    role.auth_time = Date.now()

    // 请求更新
    const result = await reqUpdateRole(role)
    if (result.status === 0) {
      // 如果当前更新的的是自己角色的权限, 强制退出
      if (role._id === memoryUtils.user.role_id) {
        memoryUtils.user = {}
        storageUtils.removeUser()
        this.props.history.replace('/login')
        message.info('当前用户角色权限修改了, 重新登录')
      } else {
        message.success('设置角色权限成功')
        this.setState({
          roles: [...this.state.roles]
        })
      }
    } else {
      message.error('更新角色权限失败')
    }
  }

  componentWillMount () {
    this.initColumns()
  }

  componentDidMount () {
    this.getRoles()
  }

  render () {
    const { roles, role, isShowAdd, isShowAuth } = this.state

    const title = (
      <span>
        <Button
          type='primary'
          style={{marginRight: 15}}
          onClick={() => this.setState({ isShowAdd: true })}>创建角色</Button>
        <Button
          type='primary'
          disabled={!role._id}
          onClick={() => this.setState({ isShowAuth: true })}
        >设置角色权限</Button>
      </span>
    )
    return (
      <Card title={title}>
        <Table
          bordered={true}
          rowKey='_id'
          dataSource={roles}
          columns={this.columns}
          pagination={{ defaultPageSize: PAGE_SIZE }}
          rowSelection={{
            type: 'radio',
            selectedRowKeys: [role._id],
            onSelect: role => { // 选择某个 radio 的回调
              this.setState({ role })
            }
          }}
          onRow={this.onRow}
        />

        <Modal
          title="添加角色"
          visible={isShowAdd}
          onOk={this.addRole}
          onCancel={() => {
            this.setState({ isShowAdd: false })
            this.form.resetFields()
          }}
        >
          <AddForm
            setForm={ form => this.form = form }
          />
        </Modal>

        <Modal
          title="设置角色权限"
          visible={isShowAuth}
          onOk={this.updateRole}
          onCancel={() => {
            this.setState({ isShowAuth: false })
          }}
        >
          <AuthForm role={role} ref={this.auth} />
        </Modal>
      </Card>
    )
  }
}
